<template>
  <div>

    <myheader></myheader>

    <main class="" id="main-collapse">

      <div class="hero-full-wrapper">
        <div class="grid">
          <div class="gutter-sizer"></div>
          <div class="grid-sizer"></div>

          <!-- 面包屑导航 -->
          <!--<Breadcrumb :datas="datas"></Breadcrumb>-->
          <bread :datas="this.datas"></bread>

          <br>
          <br>

          <!-- 上传表单 -->
          <Form>
            <FormItem lable="上传">
              <input type="file" @change="update">
              <!--上传头像-->
              <Avatar :src="src" :width="200" fit="fill"></Avatar>
              <!--上传视频-->
              <video :src="src" v-if="mp4" :width="500" autoplay="autoplay" controls="controls"></video>
            </FormItem>
          </Form>

        </div>
      </div>

    </main>

  </div>

</template>


<script>
  // 导入头部组件
  import myheader from "./myheader.vue";
  // 导入面包屑组件
  import bread from './bread'

  export default {
    data() {
      return {
        msg: "这是一个变量",
        datalist: [],
        // 头像、视频地址
        src: '',
        // 原始头像
        mysrc: '',
        img: false,
        mp4: false,
        // 面包屑变量
        datas: [{title: '首页', route: {name: 'index'}}, {title: '个人主页'}]
      }
    },

    // 组件化
    components: {
      'myheader': myheader,
      'bread': bread
    },

    mounted: function () {
      // 进入页面立刻获取用户信息
      // 发送异步请求
      this.axios.get('http://localhost:8000/usergetone/',
        {
          params: {
            uid: localStorage.getItem('uid')
          }
        }).then((res) => {
        console.log(res);
        this.img = true;
        // 动态赋值
        this.src = 'http://localhost:8000/static/upload/' + res.data.img;
        this.$Message(res.data.img)
      });
    },

    methods: {
      // 定义上传头像
      update: function (e) {
        // 获取文件对象
        var param = new FormData();
        let file = e.target.files[0];
        // 添加文件
        param.append('file', file, file.name);
        // 声明头部信息
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };

        //发送异步请求
        this.axios.post('http://localhost:8000/uploadfile/', param, config)
          .then((res) => {

            // 获取最后一个.的位置
            let index = res.data.filename.lastIndexOf('.');
            // 获取后缀
            let ret = res.data.filename.substr(index + 1);
            console.log(ret);
            // 判断是图片还是视频
            if (ret == 'jpg' || ret == 'png') {
              this.img = true;
              // 填充头像地址
              this.src = 'http://localhost:8000/static/upload/' + res.data.filename;
              this.mysrc = res.data.filename;

              // 发送请求修改头像字段
              //发送异步请求
              this.axios.get('http://localhost:8000/userupdate/', {
                params: {
                  uid: localStorage.getItem('uid'),
                  img: this.mysrc
                }
              }).then((res) => {
                console.log(res)

              })
            } else {
              this.mp4 = true;
              // 填充头像地址
              this.src = 'http://localhost:8000/static/upload/' + res.data.filename;


            }


          })
      }
    }
  }


</script>

<style>


</style>
